<template>
  <div class="count">
    <h2>Count组件:{{ count }}</h2>
    <p>总价格是:{{ totalPrice }}</p>
    <button @click="increment1">累加count</button>
    <button @click="incrementN456({ n: 3 })">累加Ncount</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  name: "Count",
  data() {
    return {};
  },
  mounted() {
    // console.log(this.$store);
    // const result = mapMutations(["increment", "incrementN"]);
    // console.log(result);
    // console.log(result.increment.call(this));
  },
  computed: {
    ...mapState(["count", "num"]),

    ...mapGetters(["totalPrice"]),
  },
  methods: {
    /* 
      mapMutations是帮我们快速生成 提交mutations的方法 组成的对象
      maoMutations还有一种对象写法 和mapState类似
    */
    // ...mapMutations(["increment", "incrementN"]),
    ...mapMutations({ increment1: "increment", incrementN456: "incrementN" }),

    /* increment() {
      //$store提供了一个commit方法,专门用来提交mutations的,commit方法接受第一个参数就是mutations的事件类型
      this.$store.commit("increment");
    },
    incrementN(n) {
      //commit方法接受第二个参数,就是想mutation事件函数中传递的参数载荷payload,在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
      this.$store.commit("incrementN", { n: n });
    }, */
  },
};
</script>

<style scoped>
.count {
  background: pink;
}
</style>